import React, { Component } from 'react';
import 'antd/dist/antd.css'
import { TreeSelect } from 'antd';
import 'maptalks/dist/maptalks.css'
// import {mapFunc} from 'maptalks/dist/maptalks.min.js';
import * as maptalks from 'maptalks'
// console.log(maptalks)

class Map extends Component {
    constructor(props) {
        super(props);
        this.state = {
        }
    }
    componentDidMount(){
        // console.log(1)
        new maptalks.Map('mapPanel', {
            center: [120, 23],
            zoom: 16,
            // centerCross : true,
            zoomControl: {
              'position': 'top-left',
              'slider': true,
              'zoomLevel': false
            },
            scaleControl: true,
            spatialReference: {
              projection: 'baidu'
            },
            attribution: {
              content: '&copy;'
            },
            baseLayer: new maptalks.GroupTileLayer(
              '地图',
              [
                new maptalks.TileLayer('百度地图', {
                  urlTemplate: 'http://online{s}.map.bdimg.com/onlinelabel/?qt=tile&x={x}&y={y}&z={z}&s=1&styles=pl&scaler=1&p=1&s=1',
                  subdomains: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9']
                }),
                new maptalks.TileLayer('百度卫星', {
                  visible: false,
                  urlTemplate: 'https://ss{s}.bdstatic.com/8bo_dTSlR1gBo1vgoIiO_jowehsv/starpic/?qt=satepc&s=1&u=x={x};y={y};z={z};v=009;type=sate&fm=46&app=webearth2&v=009',
                  subdomains: ['0', '1', '2', '3'],
                })
              ]
            ),
            layers: [new maptalks.TileLayer('traffic', {
              id: 'traffic',
              visible: false,
              urlTemplate: 'http://its.map.baidu.com:8002/traffic/TrafficTileService?x={x}&y={y}&s=1&level={z}&time=1520865612435&v=017',
            })]
          });
    }
    
    render() {
        return (
            <div id="mapPanel" style={{width:'100%',height:'100%'}}></div>
        );
    }
}
export default Map;